import React, { useState, useRef, useEffect } from "react";
import { ConfigProvider, Flex, Layout, Menu, MenuProps, Space, theme } from "antd";
import Navbar from "./navbar";
import {
	AppstoreOutlined,
	BarChartOutlined,
	ContainerOutlined,
	DesktopOutlined,
	MailOutlined,
	PieChartOutlined
} from "@ant-design/icons";
const { getDesignToken } = theme;
const { useToken } = theme;
import aBg from "@/assets/designReport/basic-bar-332-144.png";
import Typography from "antd/es/typography/Typography";
import styles from "./index.module.less"; // 引入样式文件
const headerStyle: React.CSSProperties = {
	height: 55,
	paddingInline: 20,
	position: "fixed",
	insetBlockStart: "0",
	insetInlineEnd: "0",
	width: "100%",
	boxShadow: "0 0 8px 0 rgba(0,0,0,.1)",
	zIndex: 99,
	lineHeight: "55px"
	// backgroundColor: globalToken.colorBgContainer
};

const PortalEditor: React.FC = () => {
	const { token } = useToken();
	return (
		<ConfigProvider
			prefixCls="hov-design-report"
			theme={{
				algorithm: [theme.darkAlgorithm]
			}}
		>
			<Layout>
				<Layout.Header style={{ ...headerStyle, background: "#18181c", borderBottom: "1px solid rgba(255, 255, 255, 0.09)" }}>
					<Navbar />
				</Layout.Header>
				{/* 左侧区域 */}
				<Layout.Sider
					style={{
						marginTop: "55px",
						padding: "0px",
						background: "#18181c",
						height: "calc(100vh - 55px)"
					}}
					theme="light"
					trigger={null}
					collapsed={false}
					collapsible
					width={350}
				>
					<div style={{ width: "100%", height: "100%", display: "flex" }}>
						<div
							style={{
								background: "#232324",
								height: "100%",
								padding: "5px 5px",
								width: 80
								// borderRight: "1px solid #e9ecef"
							}}
						>
							<Space
								size={1}
								direction="vertical"
								style={{
									width: "100%",
									background: "#e6f4ff",
									padding: "4px 2px",
									color: "#1677ff",
									cursor: "pointer",
									borderRadius: "5px"
								}}
								align="center"
							>
								<BarChartOutlined />
								图表
							</Space>
						</div>
						<div
							style={{
								background: "#1e1e1f",
								height: "100%",
								padding: "5px 5px",
								width: 80
								// borderRight: "1px solid #e9ecef"
							}}
						>
							<div
								style={{
									width: "100%",
									background: "#e6f4ff",
									padding: "4px 2px",
									// color: "#1677ff",
									cursor: "pointer",
									display: "flex",
									alignItems: "center",
									justifyContent: "center",
									borderRadius: "5px"
								}}
							>
								<Typography style={{ color: "#1677ff" }}>所有</Typography>
							</div>
							<div
								style={{
									width: "100%",
									padding: "4px 2px",
									textAlign: "center",
									display: "flex",
									alignItems: "center",
									justifyContent: "center",
									cursor: "pointer",
									borderRadius: "5px"
								}}
							>
								<Typography>柱状图</Typography>
							</div>
						</div>
						<div
							style={{
								width: "calc(350px - 80px - 80px)",
								height: "100%",
								display: "flex",
								padding: "10px",
								flexDirection: "column"
							}}
						>
							<div style={{ width: "100%", borderRadius: "6px", background: "#232324", marginBottom: "6px", cursor: "pointer" }}>
								<div style={{ background: "#2a2a2b", padding: "6px 15px", borderRadius: "6px 6px 0px 0px" }}>
									<Typography>柱状图</Typography>
								</div>
								<div style={{ height: 100, padding: "6px 15px", background: "#232324" }}>
									<img
										src={aBg}
										width={"100%"}
										height={"100%"}
										style={{
											borderRadius: "6px"
										}}
									/>
								</div>
							</div>
							<div style={{ width: "100%", borderRadius: "6px", background: "#232324", marginBottom: "6px", cursor: "pointer" }}>
								<div style={{ background: "#2a2a2b", padding: "6px 15px", borderRadius: "6px 6px 0px 0px" }}>
									<Typography>柱状图</Typography>
								</div>
								<div style={{ height: 100, padding: "6px 15px", background: "#232324" }}>
									<img
										src={aBg}
										width={"100%"}
										height={"100%"}
										style={{
											borderRadius: "6px"
										}}
									/>
								</div>
							</div>
						</div>
					</div>
				</Layout.Sider>
				{/* 中间区域 */}
				<div className={styles["main-content"]}></div>
				<div className={styles["properties-panel"]}></div>
				{/* 右侧显示属性 */}
			</Layout>
		</ConfigProvider>
	);
};

export default PortalEditor;
